<style scoped lang="less">
	/*@import "OrderList";*/
	.item {
		background: white;
		display: flex;
		font-size: 0.4rem;
		padding: 2vw 3vw;
		justify-content: space-between;
		align-items: center;
		border-bottom: #f4f4f4 1px solid;
	}
	.item-content {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.item-img{
		width: 9vw;
		height: 9vw;
		border-radius: 50%;
		margin-right: 2vw;
	}
	
	.item-amount {
		color: @--price;
	}
	
	.total {
		font-size: 0.5rem;
	}


</style>
<script>

  import {getRank} from '@/api/spread';
  import Vue from 'vue';
  import {List, Tab, Tabs,Image} from 'vant';

  Vue.use(List).use(Tab).use(Tabs).use(Image);
  export default {
    name: 'order-list',
    data() {
      return {
        type: null,
        active: 0,
        types: [{index: 0, type: 0, title: '全部', list: [], finished: false, loading: false},
          {index: 1, type: 1, title: '日榜', list: [], finished: false, loading: false},
          {index: 2, type: 2, title: '周榜', list: [], finished: false, loading: false},
          {index: 3, type: 3, title: '月榜', list: [], finished: false, loading: false}]
      };
    },
    created() {
      this.type = this.$route.params.type;
    },
    methods: {
      onLoad(index) {
        if (this.types[index].finished) {
          return;
        }
        this.getData();
      },

      getData() {
        let vm = this;
        if (vm.types[vm.active].finished) {
          return;
        }
        let page = vm.types[vm.active].list.length / 20 + 1;
        getRank({page: page, size: 20, type: vm.types[vm.active].type}).then(rep => {

          vm.types[vm.active].list = vm.types[vm.active].list.concat(rep.data.data.list);
          if (vm.types[vm.active].list.length === rep.data.data.count) {
            vm.types[vm.active].finished = true;
          }
          vm.types[vm.active].loading = false;
        });
      }
    }
  }
</script>
<template>
	<div>
		<van-tabs v-if="types!==null" v-model="active" sticky animated swipeable title-active-color="#EC414D"
		          :swipe-threshold="5" lazy-render>
			<template v-for="(typeItem,index) in types">
				<van-tab :title="typeItem.title" :name="typeItem.index" :key="index">
					<van-list
						v-model="typeItem.loading"
						:finished="typeItem.finished"
						finished-text="没有更多了"
						@load="onLoad(index)">
						<div class="item" v-for="item in typeItem.list" :key="index+item.id">
							<div class="item-content">
								<van-image class="item-img" :src="item.wxUserInfo.head_img"></van-image>
								<span class="item-nickname">{{item.wxUserInfo.nickname}}</span>
							</div>
							<span class="item-amount">
                    <span class="symbol">￥</span>
                    <span class="total">{{GLOBAL.formatPrice(item.total)}}</span>
              </span>
						</div>
					</van-list>
				</van-tab>
			</template>
		</van-tabs>
	
	</div>
</template>
